<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <template v-for="item in category" v-if="item.pID==null">
      <el-menu-item v-if="findId(item.id)" :index="item.id.toString()">{{ item.text }}</el-menu-item>
      <el-submenu v-else :index="item.id.toString()">
        <template slot="title">{{item.text}}</template>
        <template v-for="item2 in category" v-if="item2.pID==item.id">
          <el-menu-item v-if="findId(item2.id)" :index="item.id + '-' + item2.id.toString()">{{ item2.text }}</el-menu-item>
          <el-submenu v-else :index="item.id + '-' + item2.id.toString()">
            <template slot="title">{{item2.text}}</template>
            <template v-for="item3 in category" v-if="item3.pID==item2.id">
              <el-menu-item :index="item.id + '-' + item2.id + '-' + item3.id.toString()">{{ item3.text }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
      </el-submenu>
    </template>
  </el-menu>

</template>

<script>
import headerElMenuChilder from "./headerElMenuChilder";
export default {
  name: "headerElMenu",
  components: {
    headerElMenuChilder
  },
  data() {
    return {
      activeIndex: '1',
      category: [
        {"id":1,"text":"JAVA","pID":null},
        {"id":2,"text":"数据库","pID":null},
        {"id":3,"text":"Java基础","pID":1},
        {"id":4,"text":"Spring","pID":1},
        {"id":5,"text":"Spring MVC","pID":1},
        {"id":6,"text":"Mysql","pID":2},
        {"id":7,"text":"Redis","pID":2},
        {"id":8,"text":"算法","pID":null},
        {"id":9,"text":"AOP","pID":4},
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key);
    },
    findId(id){
      let res = true;
      for(let i = 0; i < this.category.length; i++){
        if(this.category[i].pID == id) {
          res = false;
          break;
        }
      }
      return res;
    }
  },

}
</script>

<style scoped>

</style>